<template>
  <div class='my-card'>
    <header class='header-con header-w-bg'>
      <router-link to='/membercenter'>
        <a>
          <i class='back-icon'></i>
        </a>
      </router-link>
      <h1 class='header-tit'>自游通卡</h1>
    </header>
    <div class="my-page bg-white">
      <div class="myCard-swiper">
        <swiper :options="swiperOptions">
          <swiper-slide v-for="(item, index) in cardList.content" :key="index"
                        v-bind:style="{width: slideWidth + 'px'}">
            <img src="../../assets/image/membercenter/zytk.png" alt="">
            <div class="myCard-num">{{ item.cardNum }}</div>
          </swiper-slide>
        </swiper>
      </div>
      <div class="myCard-main hasCard">
        <!-- 当前没有卡 -->
        <div class="myCard-inquire">
          <ul class="myData-list myCard">
            <li class="flex-box">
              <label>卡号</label>
              <div class="list-flex">
                <input type="text" placeholder="请输入卡号">
              </div>
            </li>
            <li class="flex-box">
              <label>密码</label>
              <div class="list-flex">
                <input type="text" placeholder="请输入密码">
              </div>
            </li>
            <li class="flex-box">
              <label>验证码</label>
              <div class="list-flex">
                <input type="text" placeholder="请输入验证码">
              </div>
              <div class="yzm-img"><img src="" alt=""></div>
            </li>
          </ul>
          <a class="submit-btn">
            <div class="org-btn">查询余额</div>
          </a>
        </div>
        <!-- 当前有卡 hasCard -->
        <div class="myCard-operating">
          <div class="check-balances" @click="showKeyBoard">
            <div class="check-btn">
              <p><em></em><em></em><em></em></p>
              <span class="bordbox">查询余额</span>
            </div>
            <div class="balances-num"></div>
          </div>
          <div class="operating-btn">
            <div>
              <a>
                <i class="key-icon"></i>
                <p>修改密码</p>
              </a>
            </div>
            <div>
              <a>
                <i class="ashbin-icon"></i>
                <p>删除自由通卡</p>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <key-board :keyboardctl="keyBoardCtl" :keyboardconfig="keyBoardConfig" @inputchange="inputChange"
               @hideboardctl="hideKeyBoard" @keyboardvalue="inputValue"
               @clearall="clearAll" @clearone="clearOne" @commit="commitFunc"></key-board>
  </div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs'
  import common from '../../assets/js/common'
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
  import KeyBoard from '../../components/keyboard/KeyBoard'

  export default {
    data () {
      return {
        cardList: {
          'resultCode': '',
          'resultMsg': '',
          'content': [],
          'accessToken': null
        },
        slideWidth: window.innerWidth - 58,
        swiperOptions: {
          effect: 'coverflow',
          grabCursor: true,
          centeredSlides: true,
          slidesPerView: 'auto',
          coverflow: {
            rotate: 0,
            stretch: -29,
            depth: 100,
            modifier: 1,
            slideShadows: false
          }
        },
        keyBoardCtl: false,
        keyBoardConfig: {
          isInput: true,
          isPickCode: true,
          btnText: '查询',
          title: '查询余额',
          first: {
            holder: '请输入密码',
            type: 'number',
            value: '',
            isfocus: true
          },
          second: {
            holder: '请输入验证码',
            type: 'abc',
            value: '',
            isfocus: false
          }
        }
      }
    },
    mounted: function () {
      var self = this
      self.getCardList()
    },
    components: {
      swiper,
      swiperSlide,
      KeyBoard
    },
    methods: {
      getCardList: function () {
        var self = this
        var userId = common.userid
        var queryUrl = common.api.memberCenter.getFreeCard
        var config = {
          headers: {
            'access-token': common.accesstoken,
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }
        var data = qs.stringify({
          userId: userId
        })
        axios.post(queryUrl, data, config).then(function (res) {
          var rData = res.data
          for (var i = 0; i < rData.content.length; i++) {
            rData.content[i].cardNum = self.splitByDistance(4, rData.content[i].cardNum)
          }
          self.cardList = res.data
        })
      },
      splitByDistance: function (splitnum, str) {
        var splitstr = ''
        var strlist = []
        for (var i = 0; i < str.length; i++) {
          if (i % splitnum === 0) {
            strlist.push(splitstr)
            splitstr = ''
          }
          splitstr = splitstr + str[i]
          if (i === str.length - 1) {
            strlist.push(splitstr)
            splitstr = ''
          }
        }
        return strlist.join(' ')
      },
      showKeyBoard: function () {
        var self = this
        self.keyBoardCtl = true
      },
      hideKeyBoard: function () {
        var self = this
        self.keyBoardCtl = false
      },
      inputChange: function (e) {
        var self = this
        var inputIndex = parseInt(e.currentTarget.getAttribute('data-index'))
        switch (inputIndex) {
          case 0:
            self.keyBoardConfig.first.isfocus = true
            self.keyBoardConfig.second.isfocus = false
            break
          case 1:
            self.keyBoardConfig.first.isfocus = false
            self.keyBoardConfig.second.isfocus = true
            break
        }
      },
      inputValue: function (value) {
        var self = this
        if (self.keyBoardConfig.isInput) {
          if (self.keyBoardConfig.first.isfocus) {
            self.keyBoardConfig.first.value = self.keyBoardConfig.first.value + value
          } else {
            self.keyBoardConfig.second.value = self.keyBoardConfig.second.value + value
          }
        }
      },
      clearAll: function () {
        var self = this
        if (self.keyBoardConfig.isInput) {
          if (self.keyBoardConfig.first.isfocus) {
            self.keyBoardConfig.first.value = ''
          } else {
            self.keyBoardConfig.second.value = ''
          }
        }
      },
      clearOne: function () {
        var self = this
        if (self.keyBoardConfig.isInput) {
          if (self.keyBoardConfig.first.isfocus) {
            var firstVal = self.keyBoardConfig.first.value
            self.keyBoardConfig.first.value = firstVal.substr(0, firstVal.length - 1)
          } else {
            var secondVal = self.keyBoardConfig.second.value
            self.keyBoardConfig.second.value = secondVal.substr(0, secondVal.length - 1)
          }
        }
      },
      commitFunc: function () {
        var self = this
        self.hideKeyBoard()
        self.clearAll()
      }
    }
  }
</script>

<style lang="scss">
  @import "../../assets/sass/member/freecard.scss";
  @import "../../assets/sass/common/swiper.scss";
</style>
